<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <ServiceRegisterSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain icon="PlusOutlined" @click="addService()">添 加</el-button>
            <el-button type="primary" icon="SecurityScanOutlined" @click="getSshKey()">获取SSH秘钥</el-button>
        </div>
        <div>
            <el-table
                :data="serviceApplicationDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="applicationName" label="微服务名称" />
                <el-table-column prop="gitPath" label="微服务GIT路径" />
                <el-table-column prop="pomPath" label="微服务POM路径" />
                <el-table-column prop="jarPath" label="微服务JAR包路径" />
                <el-table-column prop="jarName" label="微服务JAR包名称" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="success"
                            @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <ServiceAddOrUpdateDialog :serviceForm="serviceForm"/>
        </div>
        <div>
            <ServiceRegisterDeleteDialog :serviceForm="serviceForm"/>
        </div>
        <div>
            <el-dialog
                v-model="sshKeyDialogFlag"
                title="ssh秘钥"
                width="20%"
                align-center
                :show-close="false"
                :close-on-click-modal="false"
            >
                {{sshKeyInfo}}
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="closeSshKeyDialog()">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import ServiceRegisterSearch from '@/components/serviceManage/serviceRegisterManage/ServiceRegisterSearch'
import ServiceAddOrUpdateDialog from '@/components/serviceManage/serviceRegisterManage/ServiceAddOrUpdateDialog'
import ServiceRegisterDeleteDialog from "@/components/serviceManage/serviceRegisterManage/ServiceRegisterDeleteDialog";
import {applicationInfoQuery, getCommonSshPublicKey} from "@/request/service";
import {createTag} from "@/utils/tagCreate";

export default {
    name: "ServiceRegisterManage",
    data() {
        return {
            serviceForm: {
                id: '',
                applicationName: '',
                gitPath: '',
                pomPath: '',
                jarPath: '',
                jarName: ''
            },
            sshKeyInfo: "",
            sshKeyDialogFlag: false
        }
    },
    computed: {
        serviceApplicationDataList() {
            return this.$store.state.serviceApplicationDataList;
        },
        serviceApplicationSearchData() {
            return this.$store.state.serviceApplicationSearchData;
        }
    },
    components: {
        ServiceRegisterSearch,
        ServiceAddOrUpdateDialog,
        ServiceRegisterDeleteDialog
    },
    methods: {
        addService() {
            this.serviceForm = {
                id: '',
                applicationName: '',
                gitPath: '',
                pomPath: '',
                jarPath: '',
                jarName: ''
            }
            this.$store.commit('changeServiceAddOrUpdateDialogVisible', true)
        },
        handleUpdate(index, row) {
            this.serviceForm = {
                id: row.id,
                applicationName: row.applicationName,
                gitPath: row.gitPath,
                pomPath: row.pomPath,
                jarPath: row.jarPath,
                jarName: row.jarName
            }
            this.$store.commit('changeServiceAddOrUpdateDialogVisible', true)
        },
        handleDelete(index, row) {
            this.serviceForm = {
                id: row.id,
                applicationName: row.applicationName,
                gitPath: row.gitPath,
                pomPath: row.pomPath,
                jarPath: row.jarPath,
                jarName: row.jarName
            }
            this.$store.commit('changeDeleteServiceDialogVisible', true)
        },
        handleCopy(index, row) {
            this.serviceForm = {
                id: '',
                applicationName: row.applicationName,
                gitPath: row.gitPath,
                pomPath: row.pomPath,
                jarPath: row.jarPath,
                jarName: row.jarName
            }
            this.$store.commit('changeServiceAddOrUpdateDialogVisible', true)
        },
        getSshKey() {
            this.sshKeyInfo = "";
            this.sshKeyDialogFlag = true;
            getCommonSshPublicKey({}).then(res => {
                if (res.code === "200") {
                    this.sshKeyInfo = res.data;
                }
            })
        },
        closeSshKeyDialog() {
            this.sshKeyInfo = "";
            this.sshKeyDialogFlag = false;
        }
    },
    created() {
        applicationInfoQuery(this.serviceApplicationSearchData).then(res => {
            if (res.code === '200') {
                this.$store.commit('changeServiceApplicationDataList', res.data);
            }
        })
    },
    mounted() {
        createTag(this.$route, this.$store)
    }
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>